<template>
  <div id="basicLayout">
    <!-- style="min-height: 100vh使组件高度沾满可视区域 -->
    <a-layout style="min-height: 100vh">
      <!-- 因为顶部栏比较复杂，所以需要写成组件 -->
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>
      <a-layout-content class="content">
        <!-- 因为content的内容是需要根据不同的url变化的，所以这里选择路由组件 -->
        <router-view />
      </a-layout-content>
      <a-layout-footer class="footer"> 项目版权所有 © XianYun</a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue'
</script>

<style scoped>
#basicLayout .header {
  padding-inline: 20px;
  background-color: #3f87a6cd;
  color: unset;
}

#basicLayout .footer {
  background-color: #f69d3c99;
  padding: 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

#basicLayout .content {
  padding: 20px;
  background: linear-gradient(0.5turn, #3f87a6aa, #ebf8e1, #f69d3c99);
  margin-bottom: 47px;
}
</style>
